<template>
  <visual-data-box title="河流事件统计">
    <div slot="content"
         class="chart-box"
         ref="JChart" />
  </visual-data-box>
</template>

<script>
import VisualDataBox from '../common/VisualDataBox';
import { reqPost } from 'global/axios';
import { baseChart } from 'common/js/echart';

export default {
  components: {
    'visual-data-box': VisualDataBox,
  },

  async mounted() {
    let { status, result } = await reqPost({
      url: '/emergency/patrol/stat_chief_num',
    });

    if (status) {
      let data = [];
      let xaxis = [];

      result.map(({ num, _id }) => {
        data.push(num);
        xaxis.push(_id);
      });

      baseChart(this.$refs.JChart, ['巡查次数'], data, xaxis, 'bar');
    }
  },
};
</script>

<style lang="less" scoped>
.chart-box {
  width: 626px;
  height: 250px;
  padding: 16px;
}
</style>